<template>
  <g>
    <path
      :d="path"
      fill="none"
      :stroke="isSelected ? 'var(--selected-color)' : 'var(--primary-color)'"
      stroke-width="2"
    />
    <!-- 文字背景 -->
    <rect
      v-if="showText.length > 0"
      :x="labelX - textWidth / 2 - 8"
      :y="labelY - 15"
      :width="textWidth + 16"
      height="30"
      fill="var(--edge-bg)"
      stroke="#ddd"
      stroke-width="1"
      rx="4"
      :transform="textRotation"
    />
    <!-- 新增文字元素 -->
    <text
      v-if="showText.length > 0"
      :x="labelX"
      :y="labelY"
      :transform="textRotation"
      font-size="14px"
      fill="#000"
      text-anchor="middle"
      dominant-baseline="middle"
    >
      {{ showText }}
    </text>
    <path
      :transform="transform"
      :d="`M ${targetX} ${targetY + 2} L ${targetX - 5} ${targetY - 10} L ${targetX + 5} ${targetY - 10} Z`"
      :fill="isSelected ? 'var(--selected-color)' : 'var(--primary-color)'"
      stroke="none"
    />
  </g>
</template>

<script lang="ts" setup>
import { ReplyTypes, ScriptInfo } from '@/types'
import { BezierEdgeProps, EdgeProps, getBezierPath } from '@vue-flow/core'
import { computed } from 'vue'

const props = defineProps<BezierEdgeProps & Partial<EdgeProps>>()
const path = computed(() => getBezierPath(props)[0])

const transform = computed(() => {
  return getArrowTransform(props)
})

function getArrowTransform(props: BezierEdgeProps) {
  const { targetPosition } = props
  if (targetPosition === 'top') {
    return `rotate(0 ${props.targetX} ${props.targetY})`
  }
  if (targetPosition === 'bottom') {
    return `rotate(180 ${props.targetX} ${props.targetY})`
  }
  if (targetPosition === 'left') {
    return `rotate(-90 ${props.targetX} ${props.targetY})`
  }
  if (targetPosition === 'right') {
    return `rotate(90 ${props.targetX} ${props.targetY})`
  }
}

// 文字相关
const labelPosition = computed(() => {
  return getBezierPath(props) // 获取中间点坐标
})

const labelX = computed(() => labelPosition.value[1])
const labelY = computed(() => labelPosition.value[2])

const textRotation = computed(() => {
  const angle = calculateTextAngle(props)
  return `rotate(${angle} ${labelX.value} ${labelY.value})`
})

// 动态计算文字宽度
const textWidth = computed(() => {
  return props.label?.length ? props.label.length * 14 + 20 : 60 // 14px/字 + 边距
})

// 计算文字旋转角度
function calculateTextAngle(props: BezierEdgeProps) {
  const dx = props.targetX - props.sourceX
  const dy = props.targetY - props.sourceY
  return Math.atan2(dy, dx) * (0 / Math.PI)
}

// 获取起点节点
const sourceNode = computed(() => (props as EdgeProps).sourceNode)

const isSelected = computed(() => (props as EdgeProps).selected)

// 展示文字
const showText = computed(() => {
  if (sourceNode.value?.data?.type !== 'data') return ''
  const currentReplyType = (sourceNode.value.data.scriptInfo as ScriptInfo).isReply
  switch (currentReplyType) {
    case ReplyTypes.YesOrNo:
      return '确认'
    case ReplyTypes.Certificate:
      return '托举证件'
    case ReplyTypes.Confirm:
      return '朗读确认'
    default:
      return ''
  }
})
</script>
